<template>
  <div ref="map" style="width: 800px; height: 600px;">
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'; // 导入 ref
import chinaJson from '@/assets/china.json';
import * as echarts from 'echarts';

const map = ref(null); // 创建一个 ref 来引用 map 元素

function initMap() {
  const chart = echarts.init(map.value); // 使用 ref 的值
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}',
    },
    visualMap: {
      inRange: {
        color: ['#e0ffff', '#006edd'],
      },
    },
    series: [
      {
        name: '中国地图',
        type: 'map',
        mapType: 'china',
        roam: false,
        data: [],
      },
    ],
  };

  if (chinaJson) {
    echarts.registerMap('china', chinaJson);
    chart.setOption(option);
  } else {
    console.error('China JSON data is not loaded');
  }
}

// 使用 onMounted 确保在组件挂载后初始化地图
onMounted(() => {
  initMap();
});
</script>

<style>
/* 这里可以添加样式 */
</style>